<template>
	<div class="foot">
		<van-tabbar v-model="active" fixed>
		  <van-tabbar-item :to="item.path" v-for="(item,index) in footlist" :key="index">
			<span>{{ item.name }}</span>
			<img
			  slot="icon"
			  slot-scope="props"
			  :src="props.active ? item.icons.active : item.icons.normal"
			>
		  </van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
import Vue from 'vue'
import { Tabbar, TabbarItem } from 'vant';
Vue.use(Tabbar).use(TabbarItem);
export default {
  data() {
    return {
	  footlist: [
		{
			name: '首页',
			path: '/home',
			icons: {
				normal: require('../assets/img/home.png'),
				active: require('../assets/img/homea.png')
			}
		},
		{
			name: '看图',
			path: '/lookpic',
			icons: {
				normal: require('../assets/img/lookpic.png'),
				active: require('../assets/img/lookpica.png')
			}
		},
		{
			name: '装修',
			path: '/build',
			icons: {
				normal: require('../assets/img/build.png'),
				active: require('../assets/img/builda.png')
			}
		},
		{
			name: '商城',
			path: '/shop',
			icons: {
				normal: require('../assets/img/shop.png'),
				active: require('../assets/img/shopa.png')
			}
		},
		{
			name: '我的',
			path: '/user',
			icons: {
				normal: require('../assets/img/user.png'),
				active: require('../assets/img/usera.png')
			}
		}
	  ]
    }
  },
	computed: {
		active: {
			get () {
				const bootNav = ['/home', '/lookpic/space', '/lookpic/style', '/lookpic/hardclo', '/lookpic/softloa', '/lookpic/hottest', '/build', '/shop', '/user']
				if(this.$route.path == bootNav[0]) {
					return 0
				} else if (this.$route.path == bootNav[1] || this.$route.path == bootNav[2] || this.$route.path == bootNav[3] || this.$route.path == bootNav[4] || this.$route.path == bootNav[5]){
					return 1
				} else if (this.$route.path == bootNav[6]) {
					return 2
				} else if (this.$route.path == bootNav[7]) {
					return 3
				} else if (this.$route.path == bootNav[8]) {
					return 4
				}
			},
			set () {
			}
		}
	}
}
</script>

<style lang="scss" scoped="">
@import '@/lib/reset.scss';
.van-tabbar-item--active {
	color: #435b99!important;
}
</style>
